// axiom-view/src/styles/components/common/_axiom-input-number.scss

// 导入框架的核心设计变量
@use '../../variables' as *;

.axiom-input-number {
  // When 'block' prop is true, it expands to fill the parent container.
  &--block {
    width: 100%;
  }

  // 继承 Element Plus 官方组件的样式，并进行定制
  // 我们希望它的外观能与 AxiomInput 保持一致
  
  .el-input__wrapper {
    background-color: var(--axiom-bg-color-secondary);
    box-shadow: none;
    border: 1px solid var(--axiom-border-color);
    transition: border-color 0.2s, box-shadow 0.2s;

    &:hover {
      border-color: var(--axiom-border-color-hover);
    }

    &.is-focus {
      border-color: var(--axiom-primary-color);
      box-shadow: 0 0 0 1px var(--axiom-primary-color);
    }
  }

  // 控制按钮的样式
  .el-input-number__decrease,
  .el-input-number__increase {
    background-color: var(--axiom-bg-color-tertiary);
    color: var(--axiom-text-color-secondary);
    border-left: 1px solid var(--axiom-border-color);
    border-right: 1px solid var(--axiom-border-color);

    &:hover {
      color: var(--axiom-primary-color);
    }
  }
} 